import down from "../../../../imgs/down.jpg";
import Select, { Option } from "@ui/RJMart/select";
import CommonUtils from "../utils/CommonUtils";
import ToastUtils from "../utils/ToastUtils";
import HttpUtils from "../utils/HttpUtils";
import EventEmitterUtils from "../utils/EventEmitterUtils";
import Input from "@ui/RJMart/input";
import EventApi from "@module/EventApi";

export default class HighLevelSearch extends React.Component {
    constructor() {
        super();
        this.state = {
            key: "",
            brandName: "",
            casNo: "",
            suppName: "",
            minPrice: "",
            maxPrice: "",
            catlist: []
        };
    }

    componentDidMount() {
        this.findHomePageAllCategories();
    }

    findHomePageAllCategories() {
        HttpUtils.findHomePageAllCategories()
            .then(res => {
                console.log(res);
                this.setState({
                    catlist: res.list
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    clearInput() {
        let oldCatList = JSON.parse(JSON.stringify(this.state.catlist));
        this.setState({
            key: "",
            brandName: "",
            casNo: "",
            suppName: "",
            minPrice: "",
            maxPrice: ""
        });
        setTimeout(function() {
            let selectInputList = document
                .querySelector(".high-level-search-box")
                .querySelectorAll(".h-select-inputContent");
            for (var i = selectInputList.length - 1; i >= 0; i--) {
                selectInputList[i].childNodes[0].textContent = "请选择";
            }
        }, 500);
        global.catIds = "";
        global.catName = "";
        EventApi.emit("clearSub", false);
    }

    search() {
        const { closeHighSearch } = this.props;
        closeHighSearch();
        const {
            key,
            brandName,
            casNo,
            suppName,
            minPrice,
            maxPrice
        } = this.state;
        EventApi.emit("searchItemClick", { key: key });

        $state.go({
            stateName: "/searchProduct",
            params: {
                key,
                brandName,
                suppName,
                casNo,
                minPrice,
                maxPrice,
                catId: global.catIds,
                catName: global.catName
                // catName:global.catName
            }
        });
    }

    render() {
        const {
            key,
            brandName,
            casNo,
            suppName,
            minPrice,
            maxPrice,
            catlist
        } = this.state;

        return (
            <div className={"high-level-search-box"}>
                <div className={"high-level-search-top"}>
                    <InputItem
                        type={"关键字"}
                        index={"1"}
                        value={key}
                        onChange={e => {
                            this.setState({
                                key: e.target.value
                            });
                        }}
                    />
                    {this.renderFenLei(catlist)}

                    <InputItem
                        type={"品牌"}
                        index={"2"}
                        value={brandName}
                        onChange={e => {
                            this.setState({
                                brandName: e.target.value
                            });
                        }}
                    />
                </div>

                <div className={"high-level-search-bottom"}>
                    <InputItem
                        type={"CAS号"}
                        index={"3"}
                        value={casNo}
                        onChange={e => {
                            this.setState({
                                casNo: e.target.value
                            });
                        }}
                    />
                    <PriceInput
                        minPrice={minPrice}
                        maxPrice={maxPrice}
                        minPriceChange={e => {
                            this.setState({
                                minPrice: e.target.value
                            });
                        }}
                        maxPriceChange={e => {
                            this.setState({
                                maxPrice: e.target.value
                            });
                        }}
                    />
                    <InputItem
                        type={"供应商"}
                        index={"4"}
                        value={suppName}
                        onChange={e => {
                            this.setState({
                                suppName: e.target.value
                            });
                        }}
                    />
                </div>
                <div className={"high-level-search-btns-box"}>
                    <div
                        onClick={() => {
                            this.search();
                        }}
                        className={"high-level-search-btn"}
                    >
                        搜索
                    </div>
                    <div
                        onClick={() => this.clearInput()}
                        className={"high-level-search-clear"}
                    >
                        清空
                    </div>
                </div>
            </div>
        );
    }

    renderFenLei(catlist) {
        return <FenLeiInput catlist={catlist} />;
    }
}

class FenLeiInput extends React.Component {
    constructor(props) {
        super(props);
        const { catlist } = this.props;
        this.state = {
            choose: -1,
            subList: [],
            firstCat: ""
        };
    }

    componentDidMount() {
        let _self = this;
        EventApi.on("clearSub", function() {
            _self.setState({ subList: [] });
        });
    }

    render() {
        const { catlist } = this.props;
        const { subList, firstCat } = this.state;

        return (
            <div className={"high-level-search-item"}>
                <div className={"high-level-search-item-box"}>
                    <p className={"high-level-search-fenlei-p"}>{"分类"}</p>
                    <FenLeiItem
                        catlist={[{ name: "请选择" }].concat(catlist)}
                        setSubList={choosed => {
                            if (catlist[choosed - 1]) {
                                this.setState({
                                    subList: catlist[choosed - 1].subList,
                                    firstCat: catlist[choosed - 1].name
                                });
                            } else {
                                this.setState({
                                    subList: []
                                });
                            }
                        }}
                    />

                    <div className={"high-level-search-space-line"} />
                    <FenLeiItemSub
                        firstCat={firstCat}
                        catlist={[{ name: "请选择" }].concat(subList)}
                    />
                </div>
            </div>
        );
    }
}

class FenLeiItem extends React.Component {
    constructor() {
        super();

        this.lists = [];
        this.state = {
            choose: -1,
            show_border_blue: false,
            show_options: false,
            value: ""
        };
    }

    onChange() {
        const { setSubList, catlist } = this.props;
        setTimeout(() => {
            const index = this.getChoosedIndex();
            setSubList(index);
            global.catIds = catlist[index].id;
            global.catName = catlist[index].name;
        }, 100);
    }

    getChoosedIndex() {
        const { catlist } = this.props;
        const elem = document.querySelector(
            ".high-level-search-firstcat-wrapper .h-select-inputContent"
        );
        const catiText = elem.innerText;
        let index = -1;
        catlist.forEach((item, idx) => {
            if (item.name == catiText) {
                index = idx;
            }
        });
        return index;
    }

    render() {
        const { catlist } = this.props;

        return (
            <div className={"high-level-search-firstcat-wrapper"}>
                <Select
                    placeholder="请选择"
                    style={{ width: 160, marginRight: 0 }}
                    onChange={() => this.onChange()}
                >
                    {catlist &&
                        catlist.map((item, index) => (
                            <Option key={index} index={index} value={item.name}>
                                {item.name}
                            </Option>
                        ))}
                </Select>
            </div>
        );
    }
}

class FenLeiItemSub extends React.Component {
    constructor() {
        super();

        this.lists = [];
        this.state = {
            choose: -1,
            show_border_blue: false,
            show_options: false,
            value: ""
        };
    }

    onChange() {
        const { setSubList, catlist } = this.props;
        setTimeout(() => {
            const index = this.getChoosedIndex();
            global.catIds = catlist[index].id;
            global.catName = catlist[index].name;
        }, 100);
    }

    getChoosedIndex() {
        const { catlist } = this.props;
        const elem = document.querySelector(
            ".high-level-search-subcat-wrapper .h-select-inputContent"
        );
        const catiText = elem.innerText;
        let index = -1;
        catlist.forEach((item, idx) => {
            if (item.name == catiText) {
                index = idx;
            }
        });
        return index;
    }

    render() {
        const { catlist } = this.props;
        return (
            <div className={"high-level-search-subcat-wrapper"}>
                <Select
                    onChange={() => this.onChange()}
                    placeholder="请选择"
                    style={{ width: 160 }}
                >
                    {catlist &&
                        catlist.map((item, index) => (
                            <Option key={index} value={item.name}>
                                {item.name}
                            </Option>
                        ))}
                </Select>
            </div>
        );
    }
}

class PriceInput extends React.Component {
    constructor() {
        super();
        this.state = {};
    }

    render() {
        const {
            minPriceChange,
            maxPriceChange,
            minPrice,
            maxPrice
        } = this.props;
        return (
            <div className={"high-level-search-item"}>
                <div className={"high-level-search-item-box"}>
                    <p className={"high-level-search-price-p"}>{"价格区间"}</p>
                    <Input
                        style={{ width: 160 }}
                        onChange={minPriceChange}
                        value={minPrice}
                    />
                    <div className={"high-level-search-space-line"} />
                    <Input
                        style={{ width: 160 }}
                        onChange={maxPriceChange}
                        value={maxPrice}
                    />
                </div>
            </div>
        );
    }
}

class InputItem extends React.Component {
    render() {
        const { type, index, onChange, value } = this.props;
        return (
            <div className={"high-level-search-item"}>
                <div className={"high-level-search-item-box"}>
                    <p className={`high-level-search-item-p${index}`}>{type}</p>
                    <Input
                        style={{ width: 240 }}
                        onChange={onChange}
                        value={value}
                    />
                </div>
            </div>
        );
    }
}
